<template>
  <div>
    <van-nav-bar
      fixed
      title="调拨记录"
      left-arrow
      class="bg-primary color-white"
      @click-left="$utils.back($route.path)"
    />
		<van-tabs class="has-top" v-model:active="active" @change="tabChange" >
			<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
				<van-list v-if="orderList && orderList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                        @load="moreData">
					<div class="pb-50">
						<div class="css-main br-18 pd-20 bg-white mg-20" v-for="(item,index) in orderList" :key="index" >
							<Order :info="item" />
							<div class="btnlist">
								<div v-if="item.State === 0" class="cancleBtn btn" @click.stop="handleAllocation(item.ID,4)">取消调拨</div>
								<div v-if="item.State === 3" class="sureBtn btn" @click.stop="handleAllocation(item.ID,1)">确认收货</div>
								<div class="detailBtn btn" @click="goDetail(item.ID)">查看详情</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-tab>
		</van-tabs>
		
	</div>
</template>
<script>
import Order from 'components/allocation/order.vue'
import { CheckStockTransferApply, GetStockTransferApplyPage } from 'api/product'
export default {
	components: {
		Order
	},
	data() {
    return {
			tabs:[
				{
					title:'待审核',
					status:0,
				},
				{
					title:'待确认',
					status:1,
				},
				{
					title:'已通过',
					status:2,
				},
				{
					title:'已驳回',
					status:3,
				},
				{
					title:'已取消',
					status:4,
				},
			],
			active: 0,
			states: 0,

			// 请求参数
      requestData: {
				PageIndex:1
			},
			orderList: [],
			loading: false, // 加载load
      finished: false, // 无更多数据
    }
  },
	created() {
		if(this.$route.query.states){
			this.active = parseInt(this.$route.query.states)
			this.states = this.$route.query.states
			if(this.active <= 2){
				this.active++
			}
			this.requestData.states = this.$route.query.states
		}
  },
	activated() {
		this.reset()
  },
	methods: {
		tabChange(e){
			console.log('e',e)
			this.states = e
			if(e == 2){
				this.states = 1
			}else if(e == 1){
				this.states = 3
			}else if(e == 3){
				this.states = 2
			}
			this.orderList = []
			this.reset()
		},
		
		//处理调拨
		handleAllocation(id,state){
			const obj = {}
			obj.id = id
			obj.state = state
			CheckStockTransferApply(obj).then(res => {
				if(res.Data){
					setTimeout(() => {
						this.reset()
					}, 1000)
					if(state === 1){
						this.$toast('确认成功')
					}
					if(state === 4){
						this.$toast('取消成功')
					}
				} else {
					this.$toast(res.Msg)
				}
			})
		},
		moreData() {
      this.requestData.PageIndex = this.requestData.PageIndex + 1
      this.GetStockTransferApplyPage()
    },
		GetStockTransferApplyPage(){
			const _this = this
			_this.loading = true
      GetStockTransferApplyPage(this.requestData).then(res => {
				if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
            _this.finished = true
        } else {
          _this.finished = false
        }
				_this.loading = false
        if (res && res.Data && res.Data.Data.length > 0) {
          res.Data.Data.forEach(item => {
            item.show = false
            _this.orderList.push(item)
          })
        }
        _this.totalAmout = res.Data.TotalAmout
        _this.scollRequest = true
        if (_this.scollTop > 0) {
          document.body.scrollTo(0, _this.scollTop)
        }
				console.log(_this.orderList,"列表")
      })
		},
		resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 4
      this.orderList = []
      this.totalAmout = 0
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
    },
		// 重新请求
		reset() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
			this.requestData.InOrOut = 0
			this.requestData.States = this.states
      this.orderList = []
      // 获取列表
      this.GetStockTransferApplyPage()
    },
		goDetail(id){
			this.$router.push({
				path: '/allocationDetail/' + id,
				query: {
					boundType: 0,
        }
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-icon{
    color:#fff;
  }
  /deep/.van-nav-bar__title{
    color:#fff;
  }
}
.btn {
		width: 170px;
		height: 64px;
		line-height: 64px;
		border-radius: 32px;
		text-align: center;
		margin-right: 24px;
		margin-top: 12px;
	}
	.detailBtn{
		border: 1px solid #3f77fb;
		color: #3f77fb;
	}
	.cancleBtn{
		border: 1px solid #666;
		color: #666;
	}
	.sureBtn{
		border: 1px solid #333;
		color: #333;
	}
	.btnlist{
		display: flex;
		justify-content: flex-end;
	}
</style>
